/**
 * Created by hao.cheng on 2017/4/16.
 */
import React from 'react';
import { Form, Icon, Input, Button, message } from 'antd';
import { connectAlita } from 'redux-alita';
import { RouteComponentProps } from 'react-router';
import { FormProps } from 'antd/lib/form';
import umbrella from 'umbrella-storage';
import { getVerification, loginApi } from '../../api/login';
import ewm from '../../style/imgs/homePage/ewm.png';
import logo from '@/style/imgs/logo_bg.png';
import './index.less';

const FormItem = Form.Item;
type LoginProps = {
    setAlitaState: (param: any) => void;
    auth: any;
} & RouteComponentProps &
    FormProps;

let timeout: any = null;
class Login extends React.Component<LoginProps> {
    state = {
        count: 60,
        phone: undefined,
        code: undefined,
    };
    componentWillUnmount(): void {
        timeout = null;
        clearInterval(timeout);
    }
    // 验证手机号
    handlePhone = (rule: any, value: string | undefined, callback: any) => {
        if (value === undefined || value === '') {
            callback('请输入正确的手机号');
        } else if (!/^1[3456789]\d{9}$/.test(value)) {
            callback('手机号格式错误');
        } else {
            callback();
        }
    };
    // 获取验证码
    handleVer = async () => {
        let num = 0;
        this.handlePhone('', this.state.phone, (val: any) => {
            if (val && val.length > 0) {
                message.error(val);
                num++;
            }
        });
        if (num > 0) return;
        if (this.state.count === 60) {
            this.setState({ count: this.state.count - 1 });
            timeout = setInterval(() => {
                this.setState({ count: this.state.count - 1 });
            }, 1000);
            // 发送验证码接口
            const res: any = await getVerification(this.state.phone);
            message.success(res.msg);
        } else {
            this.setState({ count: 60 });
            timeout = null;
            clearInterval(timeout);
        }
    };
    // 登录
    handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        this.props.form!.validateFields(async (err, values) => {
            if (!err) {
                const res: any = await loginApi(values);
                if (res.code === 200) {
                    message.success(res.msg);
                    this.props.history.push('/app/home/index');
                    umbrella.setLocalStorage('userLogin', true);
                } else {
                    this.setState({ code: undefined });
                    umbrella.setLocalStorage('userLogin', false);
                }
            }
        });
    };
    render() {
        const { getFieldDecorator } = this.props.form!;
        const { count } = this.state;
        return (
            <div className="login">
                <div className="login-content">
                    <div className="login-left">
                        <div className="header_logo">
                            <img src={logo} alt="图片加载失败" />
                            <span className="title">万方寰宇</span>
                        </div>
                        {/* <div className="left-title">万方寰宇  专注医学论文</div>
                        <div className="left-title-2">一对一、一站式、全程无忧</div> */}
                        {/* <div className="type-list">
                            <div className="type-item">
                                <img src={img1} alt="图片加载失败" />
                                SCI发表
                            </div>
                            <div className="type-item">
                                <img src={img2} alt="图片加载失败" />
                                润色翻译服务
                            </div>
                            <div className="type-item">
                                <img src={img3} alt="图片加载失败" />
                                协助投放
                            </div>
                        </div> */}
                        <div className="imgDesic">微信咨询</div>
                        <img src={ewm} alt="图片加载失败" />
                    </div>
                    <div className="login-form">
                        <div className="login-logo">用户登录</div>
                        <Form onSubmit={this.handleSubmit} className="form-content">
                            <label>手机号</label>
                            <FormItem>
                                {getFieldDecorator('phone', {
                                    rules: [{ required: true, validator: this.handlePhone }],
                                })(
                                    <Input
                                        placeholder="请输入手机号"
                                        prefix={<Icon type="phone" style={{ fontSize: 13 }} />}
                                        style={{ fontSize: 13 }}
                                        onChange={(e: any) => {
                                            this.setState({ phone: e.target.value });
                                        }}
                                    />
                                )}
                            </FormItem>
                            <label>验证码</label>
                            <FormItem>
                                {getFieldDecorator('code', {
                                    rules: [{ required: true, message: '请输入验证码!' }],
                                })(
                                    <Input
                                        placeholder="请输入验证码"
                                        prefix={<Icon type="safety-certificate" />}
                                        suffix={
                                            <Button
                                                style={{ fontSize: 13 }}
                                                className="ver-btn"
                                                disabled={count > 0 && count < 60}
                                                onClick={this.handleVer}
                                            >
                                                {count > 0 && count < 60 ? count : '验证码'}
                                            </Button>
                                        }
                                        style={{ fontSize: 13 }}
                                        className="ver-input"
                                        onChange={(e: any) => {
                                            this.setState({ code: e.target.value });
                                        }}
                                    />
                                )}
                            </FormItem>
                            <FormItem>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    className="login-form-button"
                                    style={{ width: '100%' }}
                                >
                                    登录
                                </Button>
                            </FormItem>
                        </Form>
                    </div>
                </div>
            </div>
        );
    }
}

export default connectAlita(['auth'])(Form.create()(Login));
